<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage Job</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css"/>
<script type="text/javascript" src="table.js"></script>
<script type="text/javascript" src="js/MasterJS.js"></script>
<script type="text/javascript">
	var updateId = "";
	
	function loadUpdate(id){
		if(updateId != ""){
			cancelUpdate(updateId);
		}		
		
		var editDescPlace = document.getElementById("editDescText" + id);
		var inputDescPlace = document.getElementById("editDescInput" + id);
		
		//set visible
		editDescPlace.setAttribute("style", "display:none;");
		inputDescPlace.setAttribute("style", "display:'';");		
		
		loadUpdateButton(id);		
		updateId = id;
	}
	
	function submitUpdate(task, id){
		if(task == "insertJob"){
			var descriptionText = document.getElementById("insertDescriptionText");
			document.forms[0].elements["schoolModel.description"].value = descriptionText.value;
			//validasi
			if (!validateForm(document.forms[0])) {
				return;
			}
		}else{
			if(task == "updateJob"){								
				var inputDescPlace = document.getElementById("editDescInput" + id);							
				var descText = inputDescPlace.getElementsByTagName("input")[0];

				document.forms[0].elements["schoolModel.description"].value = descText.value;
				
				//validasi
				if (!validateForm(document.forms[0])) {
					return;
				}
			}			
				document.forms[0].elements["schoolModel.jobId"].value = id;
		}
		flyToPage(task);
	}
	
	function cancelUpdate(id){
		if(id != "0"){
			var editDescPlace = document.getElementById("editDescText" + id);
			var inputDescPlace = document.getElementById("editDescInput" + id);
						
			//set visible
			editDescPlace.setAttribute("style", "display:'';");
			inputDescPlace.setAttribute("style", "display:none;");
			cancelUpdateButton(id);
		}else{
			hideInsertField();
		}		
		updateId = "";
	}
	
	function hideInsertField(){
		document.getElementById("insertDescriptionText").value = "";
		hideInsertForm();
	}
	
	function showFieldInsert(){
		if(updateId != ""){
			cancelUpdate(updateId);
		}
		updateId = "0";
		showInsertForm();
	}
	
	function searchByParam() {
		document.forms[0].elements['paramJobId'].value = document.getElementById('searchJobId').value;
		document.forms[0].elements['paramDescription'].value = document.getElementById('searchDesc').value;
		document.forms[0].elements['task'].value='manageJob';
		document.forms[0].submit();
	}
	
	function setDisplay() {
		document.getElementById('searchJobId').value = document.forms[0].elements['paramJobId'].value;
		document.getElementById('searchDesc').value = document.forms[0].elements['paramDescription'].value;
		if(document.forms[0].elements['paramJobId'].value != ''){
		document.getElementById('searchJobId').focus(); 
		}
		else if(document.forms[0].elements['paramDescription'].value != ''){
		document.getElementById('searchDesc').focus(); 
		}
		
	}
</script>
</head>
<html:javascript formName="schoolForm" dynamicJavascript="true" staticJavascript="true" method="validateForm" page="3"/>
<%
	if(session.getAttribute("result") != null)
	{
		String message = session.getAttribute("result").toString();
		%>
			<script type="text/javascript">
				window.alert('<%=message%>');
			</script>
		<%
		session.removeAttribute("result");
	}
%> 
<body onload="javascript:hideInsertField();setDisplay();" onkeydown="javascript:disableF5(event, 'manageJob');">
	<center>
		<table width="100%" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">Setting > Manage Job</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"><br>
					
					<!-- Insert Code Here -->
					<html:form action="/Master" method="post">
						<html:hidden property="task"/>
						<html:hidden property="schoolModel.jobId"/>
						<html:hidden property="schoolModel.description"/>
						<html:hidden property="paramJobId"/>
						<html:hidden property="paramDescription"/>
						<table width="95%" border="0" align="center" class="boxShadow example table-autosort table-autofilter table-autopage:10 table-stripeclass:alternate table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount" id="t1">	
							<thead>									
							<tr class="headerBox formHeaderBackground">
<!-- 								<th align="center" class="table-filterable table-sortable:default" style="padding:5px 7px;">School ID</th> -->
								<th colspan="2" align="center" class="formListStyle filterable table-sortable:default">Job Id</th>
								<th align="center" class="formListStyle filterable table-sortable:default">Description</th>
								<th></th>
							</tr>
							<tr>
								<th colspan="2" class="formListStyle" align="center"><input type="text" class="textStretch" id="searchJobId" onkeyup="javascript:searchByParam();" /></th>
								<th align="center" class="formListStyle"><input type="text" class="textStretch" id="searchDesc" onkeyup="javascript:searchByParam();" /></th>
							</tr>
							</thead>	
							<tbody>												
							<logic:notEmpty name="schoolForm" property="jobList">
								<logic:iterate id="listData" name="schoolForm" property="jobList">
									<tr class="formListBackground">
<%-- 										<td align="center" style="vertical-align: middle;"><bean:write name="listData" property="schoolId"></bean:write></td> --%>
										<td align="center" class="formListStyle leftAlign" colspan="2">
											<bean:write name="listData" property="jobId"/> 											
										</td>
										<td id='editDescText<bean:write name="listData" property="jobId"/>' class="formListStyle leftAlign" >
											<bean:write name="listData" property="description"/>
										</td>											
										<td id='editDescInput<bean:write name="listData" property="jobId"/>'  class="formListStyle"  style="display:none;" >
											<input type="text" value='<bean:write name="listData" property="description"/>' class="textStretch"/>											
										</td>
										<td align="center" class="formListStyle">
											<span id='editButton<bean:write name="listData" property="jobId"/>'>
												<img src="images/editButton.png" title="edit" style="cursor: pointer;" onclick="javascript:loadUpdate('<bean:write name="listData" property="jobId"/>');"/>
												&nbsp;
												<img src="images/deleteButton.png" title="delete" style="cursor: pointer;" onclick="javascript:submitUpdate('deleteJob', '<bean:write name="listData" property="jobId"/>');"/>
											</span>
											<span id='saveButton<bean:write name="listData" property="jobId"/>' style="display:none;">
												<img src="images/saveButton.png" title="save" style="cursor: pointer;" onclick="javascript:submitUpdate('updateJob', '<bean:write name="listData" property="jobId"/>');"/>
												&nbsp;
												<img src="images/cancelButton.png" title="cancel" style="cursor: pointer;" onclick="javascript:cancelUpdate('<bean:write name="listData" property="jobId"/>');"/>
											</span>
										</td>
									</tr>
								</logic:iterate>
							</logic:notEmpty>
							<logic:empty name="schoolForm" property="jobList">
								<tr class="formListBackground">
									<td colspan="4" class="formListStyle" align="center">Data is not found</td>
								</tr>
							</logic:empty>
							</tbody>
							<tfoot>	
							<tr class="headerBox formHeaderBackground">
								<td width="80px" class="table-page:previous formListStyle" style="cursor:pointer;">&lt;&lt; Previous</td>
								<td colspan="2" style="text-align:center; vertical-align: middle;">Page <span id="t1page"></span>&nbsp;of <span id="t1pages"></span></td>
								<td width="55px" align="right" class="table-page:next formListStyle" style="cursor:pointer;">Next &gt;&gt;</td>
							</tr>				
							<tr id="insertRow" class="greyBackground">
								<td class="formListStyle"><b>Description : </b></td>
								<td class="formListStyle" colspan="2"><input type="text" id="insertDescriptionText" class="textStretch"></td>								
								<td align="center" class="formListStyle">
									<span>
										<img src="images/saveButton.png" title="submit" style="cursor: pointer;" onclick="javascript:submitUpdate('insertJob', '');"/>
										&nbsp;
										<img src="images/cancelButton.png" title="cancel" style="cursor: pointer;" onclick="javascript:hideInsertField();"/>
									</span>
								</td>
							</tr>				
							<tr>
								<td colspan="4" id="insertButton" title="add new" align="center" class="greyBackground">						
									<div class="insertButtonGridStyle" onclick="javascript:showFieldInsert();">
										<table>
											<tr>
												<td class="formListStyle"><img src="images/addButton.png"></td>
												<td class="formListStyle"><b>Add New Job</b></td>
											</tr>
										</table>
									</div>									
								</td>
							</tr>							
							<tr>
								<td class="headerBox formHeaderBackground" colspan="4" align="center" style="padding:5px 7px;">									
									<span id="t1filtercount"></span>&nbsp;of <span id="t1allcount"></span>&nbsp;rows match filter(s)
								</td>
							</tr>													
						</tfoot>
						</table>
					</html:form>
					<br><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2014. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
</body>
</html>